<template>
	<div class="login-container flex">
		<div class="login-left">
			<img class="title" src="/@/assets/login_wz.svg" />
			<img class="bg" src="/@/assets/login_bg.png"  />
		</div>
		<div class="login-right flex">
			<div class="login-right-warp flex-margin">
				<div class="login-right-warp-mian">
					<div class="login-right-warp-main-title">账号登录</div>
					<div class="login-right-warp-main-form">
						<Account />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted } from 'vue';
import { NextLoading } from '/@/utils/loading';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	height: 100%;
	background: linear-gradient(180deg, #67D6FF 0%, #1988FF 100%);
	.login-left {
		flex: 1;
		text-align: center;
		// margin-right: 100px;

		.title {
			height: 50px;
			margin-top: 130px;
			object-fit: contain;
		}

		.bg {
			height: 495px;
			width: 596px;
			object-fit: contain;
			margin-top: 15px;
		}
	}
	.login-right {
		// width: 700px;
		margin-right: 150px;
		.login-right-warp {
			box-shadow: 0px 0px 47px 3px rgba(130,198,246,0.5);
			border-radius: 20px;
			width: 500px;
			position: relative;
			overflow: hidden;
			background-color: var(--el-color-white);
			.login-right-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;
				.login-right-warp-main-title {
					margin-top: 70px;
					font-size: 32px;
					font-weight: bold;
					text-align: center;
					letter-spacing: 3px;
					animation: logoAnimation 0.3s ease;
					animation-delay: 0.3s;
					color: #3B7AEE;
				}
				.login-right-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;
				}
			}
		}
	}
}
</style>
